<script setup lang="ts">
// 不使用 ts
// defineProps({
//   money: {
//     type: Number,
//     required: true,
//   },
//   car: {
//     type: String,
//     required: false,
//     default: '宝马车',
//   },
// });

// 使用 defineProps 泛型函数定
// defineProps<{ money: number; car?: string }>();

// 使用 ts 定义属性，配置默认值的方式
withDefaults(defineProps<{ money: number; car?: string }>(), {
  car: '宝马车',
});

// 使用 vite 解构 props 配置默值的形式
// const { money, car = '宝马车' } = defineProps<{
//   money: number;
//   car?: string;
// }>();

// 不使用 ts 定义 emits 事件
// const emits = defineEmits(['changeMoney', 'changeCar']);
const emits = defineEmits<{
  (e: 'changeMoney', money: number): void;
  (e: 'changeCar', car?: string): void;
}>();
</script>

<template>
  <div>{{ money }}, {{ car }}</div>
  <!-- emits 参数类型是无法约束的 -->
  <!-- <button @click="emits('changeMoney', '100')">给钱</button> -->
  <!-- 使用 ts 类型约束后，参数类型就不能写错了 -->
  <button @click="emits('changeMoney', 100)">给钱</button>
</template>

<style scoped></style>
